// ==================== 登录注册表单切换 ====================

$('#showReg').on('click', function () {
    // 显示注册，隐藏登录
    $('.reg-form').show()
    $('.login-form').hide()
})

$('#showLogin').on('click', function () {
    // 显示登录，隐藏注册
    $('.reg-form').hide()
    $('.login-form').show()
})

// ==================== 自定义校验规则 ====================
// 记得：要使用form.verify方法来做表单的校验，就需要处理好form，就是从layui.form获取到的
let form = layui.form
form.verify({
    //我们既支持上述函数式的方式，也支持下述数组的形式
    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
    // pwd 对密码校验
    pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],

    // 对确认密码做校验 ==> 内容和密码内容一致
    repwd: function (value, item) {
        // value：表单的值、item：表单的DOM对象
        // console.log(value, item);

        // 1. 获取到密码框的内容
        // 2. 确认密码框的内容（value） 和 密码框的内容 作比较，比较的值不一样，就需要提示

        // 1.
        let pwdVal = $('#pwdInp').val()
        // console.log(pwdVal, value);

        // 2.
        if (pwdVal !== value) {
            // 说明两次输入的密码不一致
            // return 后面的内容（校验不通过，提示的消息）
            return '两次输入的密码不一致'
        }
    },
})

// ==================== ajax请求实现注册功能 ====================
let layer = layui.layer
$('.reg-form').on('submit', function (e) {
    e.preventDefault()

    // 请求中带数据 ==> jQ的serialize方法可以方便的获取到带有name属性的值
    let data = $(this).serialize()
    // console.log("🚀 ~ file: login.js ~ line 50 ~ data", data);

    // 语法
    // axios.post(url, data, config).then()

    // ajax请求 ==> jQ里面 $.ajax 方法 ==> axios
    axios.post('/api/reguser', data).then((res) => {
        // console.log(res.data); // 服务器响应回来的数据

        if (res.data.status !== 0) {
            // 注册失败
            // return console.log(res.data.message);
            return layer.msg(res.data.message)
        }

        // 注册成功
        // console.log("注册成功了");
        layer.msg('注册成功了')

        // 切换到登录界面
        $('#showLogin').click()
    })
})

// ==================== ajax请求实现登录功能 ====================
$('.login-form').on('submit', function (e) {
    e.preventDefault()

    // 收集表单数据
    let data = $(this).serialize()
    // console.log("🚀 ~ file: login.js ~ line 83 ~ data", data);

    axios.post('/api/login', data).then((res) => {
        console.log(res.data)

        if (res.data.status !== 0) {
            // 登录失败
            return layer.msg(res.data.message)
        }

        /* layer.msg("登录成功，跳转到首页");
      // 跳转页面
      location.href = "/index.html"; */

        // 处理token（本地存储起来，以后要用到，类似随申码）一定要有，否则会有的接口无法请求成功
        // res.data.token
        localStorage.setItem('token', res.data.token)

        // 优化提示效果
        layer.msg(
            '登录成功，即将跳转到首页',
            {
                time: 2000, //2秒关闭（如果不配置，默认是3秒）
            },
            function () {
                // 关闭后想做些什么
                // 跳转页面
                location.href = './index.html'
            }
        )
    })
})
